<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href='https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css' rel='stylesheet'>
    <title>重置密码</title>

    <script type="text/javascript">

        window.onload = function (ev) {
                var ppassword = document.getElementById("ppassword");
                var ppassword1 = document.getElementById("ppassword1");
                var elementById = document.getElementById("sub_btn");
                var flag = true;

                var pw = document.getElementById("pw");
                var pw1 = document.getElementById("pw1");

                var ppassword2 = null;
                var ppassword12 = null;



                //当密码获取焦点时候，h5标签的东西失去
                ppassword.onfocus = function (ev1) {
                    pw.innerHTML = "";
                }
                //密码的失去焦点事件
                ppassword.onblur = function (ev1) {
                    ppassword2 = ppassword.value;
                    // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
                    var reg1 = /^[a-zA-Z]\w{5,17}$/;
                    var b = reg1.test(ppassword2);
                    if (!b) {
                        pw.innerHTML = "格式不正确"
                        pw.style.color = "red";
                        flag = false;
                    } else {
                        flag = true;
                    }

                }

                //当确认密码获取焦点时候，h5标签的东西失去
                ppassword1.onfocus = function (ev1) {
                    pw1.innerHTML = "";
                }
                //确认密码的失去焦点事件
                ppassword1.onblur = function (ev1) {
                    ppassword12 = ppassword1.value;
                    // 确认密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
                    var reg1 = /^[a-zA-Z]\w{5,17}$/;
                    var b = reg1.test(ppassword12);
                    if (!b) {
                        pw1.innerHTML = "格式不正确"
                        pw1.style.color = "red";
                        flag = false;
                    } else {
                        flag = true;
                    }

                }

                //提交！！！
                elementById.onclick = function (ev2) {

                    if (ppassword2 != ppassword12) {
                        alert("俩次输入的密码不同")
                        return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                    }
                    //这里写一个这是因为全局看，只要有false就不提交
                    return flag;
                }

            }
    </script>
</head>
<body>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3 class="text-success text-center">
                重置密码
            </h3>
            <form method="post" action="/updatepassword">
                <fieldset>
                    <legend>请牢记密码哟~~~</legend>
                    <input type="hidden" name="pid" value="${pid}"/>
                    <label>输入新密码：</label><input type="text" name="ppassword" id="ppassword" required/><br><br>
                    <label>再次输入：</label><input type="text" name="ppassword1" id="ppassword1" required/>
                    <button type="submit" class="btn" id="sub_btn">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>

</body>
</html>